import React, { Fragment } from 'react';
import DropWrapper from './dropWrapper';
import DropGroup from './dropGroup';
import DropCube from './dropCube';
import EmptyView from './emptyView';
import AndCapsule from './andCapsule';
import styles from './style.less';

const GenerateList = ({ dataList, onDrop, handleDelete }) =>
  dataList.map(({ nanoid, children, ...restProps }, index) =>
    children && children.length ? (
      <Fragment key={nanoid}>
        {!!index && <AndCapsule />}
        <DropGroup nanoid={nanoid} {...restProps} onDrop={onDrop}>
          {GenerateList({ dataList: children, onDrop, handleDelete })}
        </DropGroup>
      </Fragment>
    ) : (
      <Fragment key={nanoid}>
        {!!index && <AndCapsule />}
        <DropCube
          nanoid={nanoid}
          {...restProps}
          onDrop={onDrop}
          handleDelete={handleDelete}
        />
      </Fragment>
    ),
  );

const DropViewer = ({ dataList, onDrop, handleDelete }) => {
  return (
    <div className={styles.viewDropContent}>
      {dataList && dataList.length ? (
        GenerateList({ dataList, onDrop, handleDelete })
      ) : (
        <EmptyView />
      )}
    </div>
  );
};

export default DropWrapper(DropViewer);
